<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
    <style type="text/css">
        body{
            background-image: url("{% static 'images/tupian1.jpg' %}");
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
        h1{
            text-align: center;
            font-size: 50px;
        }
        p {
            text-align: center;
            font-size: 25px;
            color: black;
        }
        .in{
            width: 180px;
            font-size: 18px;
            border: 0;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            background:#ffffff00;
            color: white;
        }
        .but{
            margin-top: 15px;
            width: 180px;
            height: 30px;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            background:linear-gradient(to right,#f30909 0%,#4013e6e1 100%);
            border: 0;
            border-radius: 15px;
        }
        #login{
            width: 30%;
            height: auto;
            margin: 0 auto;
            margin-top: 15%;
            text-align: center;
            background: #00000060;
            padding: 20px 50px;
        }
        #login i{
            font-size: 18px;
            color: #fff;
        }
        #login h1{
            color: #fff;
            text-shadow:0 0 10px;
            letter-spacing: 1px;
            text-align: center;
        }
    </style>
</head>
<body style="text-align: center">

<div id="login">
    <h1>Login</h1>
    <form action="/app/user/userLogin/" method="post">
        {% csrf_token %}

        <p>
            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
            <input type="text" name="username" placeholder="Username" class="in">
        </p>
        <p>
            <i class="fa fa-key" aria-hidden="true"></i>
            <input type="password" name="password" placeholder="Password" class="in">
        </p>

        <button type="submit" class="but">立即登录</button>
    </form>
</div>
<h1 style="color: #f30909">{{ msg }}</h1>
</body>
</html>